<template>
	<view class="container">
		<!-- 左上角返回图标 -->
		<view class="back-icon-container" @click="goBack">
			<image class="back-icon" src="/static/alibaba_icon/back.svg" mode="widthFix" />
		</view>

		<!-- 用户信息列表 -->
		<view class="info-item" v-for="(value, key) in displayInfo" :key="key"
			@click="keyEditable(key) && openEdit(key)">
			<text>{{ formLabels[key] }}</text>
			<view class="right-section">
				<text>{{ key === 'createTime' ? formatCreateTime(value) : value }}</text>
				<text v-if="keyEditable(key)" class="arrow">></text>
			</view>
		</view>

		<!-- 底部弹出修改框 -->
		<view v-if="isEditVisible" class="edit-popup" @touchmove.prevent>
			<view class="edit-popup-header">
				<text>修改{{ formLabels[editField] }}</text>
				<view @click="closeEdit" class="close-icon">X</view>
			</view>
			<view class="edit-popup-body">
				<input type="text" v-model="editValue" placeholder="请输入新值" />
			</view>
				<view class="block">
					
				</view>
			<view class="edit-popup-footer">
				<button @click="confirmEdit" class="confirm-button">确定</button>
			</view>
		</view>

		<!-- 退出登录按钮 -->
		<button class="logout-button" @click="logout">退出登录</button>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex";

	export default {
		data() {
			return {
				isEditVisible: false,
				editField: '',
				editValue: '',
				formLabels: {
					userAccount: '用户账号',
					userName: '昵称',
					userPassword: '用户密码',
					userMoney: '余额',
					userPhone: '手机号',
					userSex: '性别',
					createTime: '创建时间'
				}
			};
		},
		computed: {
			...mapState(["userInfo"]),
			displayInfo() {
				// 只展示部分可编辑字段，userId、isVip、userIdcard 不显示
				return {
					userAccount: this.userInfo.userAccount,
					userName: this.userInfo.userName,
					userPassword: this.userInfo.userPassword,
					userMoney: this.userInfo.userMoney,
					userPhone: this.userInfo.userPhone,
					userSex: this.userInfo.userSex,
					createTime: this.userInfo.createTime
				};
			}
		},
		methods: {
			...mapMutations(["setUserInfo"]),
			keyEditable(key) {
				// 只有 userName、userPassword、userPhone、userSex 可修改
				return ["userName", "userPassword", "userPhone", "userSex"].includes(key);
			},
			openEdit(key) {
				this.editField = key;
				this.editValue = this.userInfo[key];
				this.isEditVisible = true;
			},
			closeEdit() {
				this.isEditVisible = false;
				this.editValue = '';
			},
			confirmEdit() {
				if (this.editValue.trim() && this.editValue.trim() !== this.userInfo[this.editField]) {
					// 更新 userInfo 并提交到 store
					const updatedUserInfo = {
						...this.userInfo,
						[this.editField]: this.editValue.trim()
					};

					// 提交到后端
					uni.request({
						url: 'http://localhost:8006/user/setUser', // 替换为实际的后端接口地址
						method: 'POST',
						data: updatedUserInfo,
						success: (res) => {
							if (res.statusCode === 200 && res.data.code === 200) {
								// 更新本地存储和 store
								this.setUserInfo(updatedUserInfo);
								console.log('用户信息更新成功：', updatedUserInfo);
								uni.showToast({
									title: '更新成功',
									icon: 'success'
								});
							} else {
								console.error('用户信息更新失败：', res.data.msg);
								uni.showToast({
									title: '更新失败',
									icon: 'none'
								});
							}
						},
						fail: (err) => {
							console.error('请求失败：', err);
							uni.showToast({
								title: '网络错误',
								icon: 'none'
							});
						}
					});
				}
				this.closeEdit();
			},

			formatCreateTime(timestamp) {
				const date = new Date(timestamp);
				return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
			},
			goBack() {
				uni.navigateBack();
			},
			logout() {
				// 清空 userInfo 并提交到 store
				this.setUserInfo({});
				uni.navigateBack();
				console.log('用户已退出登录');
			}
		}
	};
</script>

<style scoped>
	.container {
		padding: 20px;
		background-color: #f8f8f8;
		position: relative;
	}

	.back-icon-container {
		position: absolute;
		top: 10px;
		left: 10px;
		width: 36px;
		height: 36px;
		cursor: pointer;
	}

	.back-icon {
		width: 36px;
		height: 36px;
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px 0;
		border-bottom: 1px solid #eaeaea;
	}

	.right-section {
		display: flex;
		align-items: center;
	}

	.arrow {
		margin-left: 10px;
		color: #888;
	}

	.edit-popup {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1);
		z-index: 999;
	}

	.edit-popup-header {
		display: flex;
		justify-content: space-between;
		padding: 20px;
		font-weight: bold;
		border-bottom: 1px solid #eaeaea;
	}

	.close-icon {
		cursor: pointer;
	}

	.edit-popup-body {
		padding: 20px;
	}

	.input {
		width: 100%;
		padding: 10px;
		border: 1px solid #eaeaea;
		border-radius: 5px;
		margin-bottom: 10px;
	}

	.edit-popup-footer {
		padding: 20px;
		text-align: center;
	}
	.block{
		height: 50vh;
	}
	.confirm-button {
		padding: 10px 20px;
		background-color: #4285f4;
		color: #fff;
		border-radius: 5px;
		border: none;
		cursor: pointer;
		width: 100%;
	}

	.logout-button {
		margin-top: 20px;
		padding: 15px;
		background-color: #f44336;
		color: #fff;
		border-radius: 5px;
		border: none;
		text-align: center;
		cursor: pointer;
		width: 100%;
	}
</style>